<template>
  <div class="bg-white pb-10 rounded">
    <div class="p-4 font-bold text-[18px]">房态管理</div>
    <Spin :spinning="props.loading">
      <div class="bg-white flex flex-wrap p-2">
        <div v-for="item in props.items" 
        :key="item.id" 
        @click="() => onRoomClick(item)"
        :class="'room-item min-w-[180px] max-w-[180px] m-2 h-[100px] flex-1 border-2 rounded-lg shadow-lg cursor-pointer hover:border-blue ' + getActiveRoomStyle(item.id) " >
          <div class="text-[16px] font-bold">{{ item.name }} - {{ getRoomType(item.type) }}</div>
          <div :class="'mt-2 '+ (item.status == '1' ? 'text-red' : 'text-blue')">{{ item.status == '1' ? '计费中' : '可预约' }}</div>
        </div>
      </div>
    </Spin>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
import { get } from 'lodash-es'
import { Spin } from 'ant-design-vue'
import { AddRoomParams } from '@/api/roomManage/model'
import { IDictionaryOpts } from '@/api/dictionary/model'

const emits = defineEmits(['change'])

const activeRoomRef = ref();

const props = defineProps<{
  items: AddRoomParams[],
  loading: boolean,
  roomTypeOpts: IDictionaryOpts[]
}>()


/** 获取房间类型名字 */
function getRoomType(code: string) {
  const target = (props.roomTypeOpts || []).find(item => item.value == code);
  return get(target, 'label', '--')
}

function onRoomClick(item: AddRoomParams) {
  activeRoomRef.value = item.id;
  emits('change', item);
}

/** 获取房间选中样式 */
function getActiveRoomStyle(id?: string) {
  if (id && activeRoomRef.value == id) {
    return 'border-green'
  }
  return ''
}

</script>

<style lang="less" scoped >
.room-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>